<!--登录页-->
<template>
  <div class="page_box">
    <div class="login_box">
      <van-image class="logo_box" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      <div class="login_from_box">
        <van-field
          class="no_bg"
          left-icon="phone-o"
          v-model="loginForm.mobile"
          clearable
          placeholder="请输入手机号"
        />
        <van-field
          class="no_bg"
          left-icon="chat-o"
          v-model="loginForm.code"
          center
          clearable
          maxlength="6"
          placeholder="请输入短信验证码"
        >
          <van-button
            v-if="showCodeBtn"
            slot="button"
            color="#588135"
            size="small"
            type="primary"
            @click="get_code"
          >{{txt}}</van-button>
          <van-button
            v-if="!showCodeBtn"
            slot="button"
            color="#588135"
            size="small"
            type="primary"
            :disabled="true"
          >{{second}}</van-button>
        </van-field>

        <van-button class="login_btn" type="primary" color="#588135" @click="login" block>登录</van-button>
        <div class="btn_bottom_box">
          <span v-if="loginForm.login_type != 'association'" @click="register" block>注册账号</span>
          <span v-else></span>
          <span @click="versionFlag = true">切换版本</span>
        </div>
      </div>
    </div>
    <van-dialog
      v-model="versionFlag"
      title="切换版本"
      show-cancel-button
      cancel-button-color="red"
      :show-confirm-button="false"
    >
      <div class="version_box">
        <p v-for="(item,index) in login_type" :key="index" @click="tab_click(item,index)">
          <span>{{item.name}}</span>
          <span v-if="item.active">(当前版本)</span>
        </p>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from "vant";
import { apiSignIn, apiVerificationCode } from "@/config/api";
import { mobileRule } from "../../assets/pubilc.js";
export default {
  data() {
    return {
      versionFlag: false,
      second: 60,
      showCodeBtn: true,
      txt: "获取验证码",
      loginForm: {
        mobile: "",
        code: "",
        login_type: "hotel"
      },
      login_type: [
        {
          active: true,
          name: "企业版",
          logo: "",
          key: "hotel"
        },
        {
          active: false,
          name: "协会版",
          logo: "",
          key: "association"
        },
        {
          active: false,
          name: "专家版",
          logo: "",
          key: "reviewer"
        }
      ]
    };
  },
  methods: {
    timeDown() {
      let result = setInterval(() => {
        --this.second;
        if (this.second < 0) {
          clearInterval(result);
          this.second = 60;
          this.showCodeBtn = true;
          this.txt = "重新获取";
        }
      }, 1000);
    },
    get_code() {
      if (mobileRule(this.loginForm.mobile)) {
        Toast.fail("手机号格式不正确");
      } else {
        this.showCodeBtn = false;
        this.timeDown();
        let data = {};
        data.mobile = this.loginForm.mobile;
        apiVerificationCode(data)
          .then(res => {
            if (res.code == 100) {
              Toast.success("发送成功");
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    login() {
      if (this.loginForm.mobile === "" || this.loginForm.code === "") {
        Toast.fail("手机号或验证码不能为空");
      } else {
        apiSignIn(this.loginForm, { needHud: 1, needAllState: 1 })
          .then(res => {
            //register_hotel 是否实名认证，0未提交，1实名认证中，2实名认证未通过，3认证通过，4加入认证中，5加入认证不通过，6专家认证中 7专家认证不通过
            localStorage.setItem("userInfo", res.data);
            let data = JSON.parse(res.data);
            if (res.code == 100) {
              if (data.verified == 0) {
                // 未提交
                this.$router.push("/hotel_register_index");
              } else if (data.verified == 4) {
                // 认证中
                Toast.fail(
                  "您已申请加入" + data.join_hotel_name + "，审核中，请等待"
                );
              } else if (data.verified == 5) {
                // 认证不通过
                Toast.fail(
                  data.join_hotel_name + "不同意您加入，请确认企业编码是否正确"
                );
                this.$router.push("/hotel_register_index");
              } else if (data.verified == 3) {
                // 认证通过
                this.$router.push("/home");
              }
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },

    register() {
      this.$router.push({
        path: "/register",
        query: { login_type: this.loginForm.login_type }
      });
    },
    tab_click(item, index) {
      for (let i = 0; i < this.login_type.length; i++) {
        if (i == index) {
          this.login_type[i].active = true;
        } else {
          this.login_type[i].active = false;
        }
      }
      this.versionFlag = false;
      this.loginForm.login_type = item.key;
      localStorage.setItem("login_type", this.loginForm.login_type);

      Toast.success("已切换到" + item.name);
    }
  }
};
</script>

<style scoped>
.page_box {
  width: 100%;
  height: 100vh;
  background: #b0c870;
  box-sizing: border-box;
  padding: 0px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login_box {
  width: 100%;
  height: 435px;
  background: #bcd38b;
  border-radius: 10px;
  position: relative;
}
.logo_box {
  position: absolute;
  width: 90px;
  height: 90px;
  left: 50%;
  margin-left: -45px;
  margin-top: -45px;
  background: #ebebeb;
  border-radius: 10px;
  overflow: hidden;
}
.login_from_box {
  margin-top: 105px;
  box-sizing: border-box;
  padding: 0px 20px;
}
.no_bg {
  background: none;
  border-bottom: solid 2px #a5be7e;
}
.login_from_box >>> .van-cell:not(:last-child)::after {
  border: none;
}
.login_btn {
  margin-top: 25px;
  border-radius: 5px;
}
.btn_bottom_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: #749048;
}
.version_box {
  width: 100%;
  line-height: 30px;
  box-sizing: border-box;
  padding: 0px 5px;
  margin-top: 5px;
}
.version_box p {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: solid 1px #ebebeb;
}
.version_box p:nth-child(1) {
  border-top: solid 1px #ebebeb;
}
</style>
